<template>
	<view class="page">
		<view class="content">
			<view class="bg_color"></view>
			<view class="title">
				个人中心
			</view>
			<view class="pic" @click="userDetailsBtn" >
				<image style="border-radius: 106.5rpx;border: 5rpx solid white;" :src="userStore.user.img ||'/static/images/user.jpg' " mode="aspectFit"></image>
			</view>
			<view class="info">
				<view class="top">
					<view class="phone">
						<view class="userName">
                            {{userStore.user.nickName ? userStore.user.nickName:'点击登录'}}
						</view>
						<view class="telephone">
							{{userStore.user?.phone}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="tools">
						常用工具
					</view>
					<view class="tools_item">
						<view @click.stop="evaluateLayout" class="evaluate">
							<image src="/static/images/收藏.png" mode="aspectFit"></image>
							<view class="evaluate_item">
								预选房
							</view>
						</view>
						<view @click.stop="settingsLayout" class="settings">
							<image src="/static/images/设置 (1).png" mode="aspectFit"></image>
							<view class="settings_item">
								设置
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer" @click="handleTouchEnd">
				技术支持：洛阳乐盈网络科技有限公司
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onBeforeMount,
		ref,
		onMounted
	} from "vue"
	import {
		loginService
	} from "../../api/user"
	import {
		useUserStore
	} from '@/stores/index';
	import {
		onShow
	} from "@dcloudio/uni-app";
	const userStore = useUserStore();
	// const userStore=useUserStore()
	// const imageUrl=userStore.user.avatarUrl
	const evaluateLayout = () => {
        if (!uni.getStorageSync('token')) {
            userStore.getUser()
        }else {
            uni.navigateTo({
                url: '/pages/collect/collect'
            })
        }
	}
	const settingsLayout = () => {
        if (!uni.getStorageSync('token')) {
            userStore.getUser()
        }else {
            uni.navigateTo({
                url: '/pages/settings/settings'
            })

        }
	}

    onShow((options) => {
		// console.log(44444, userStore.user)
        startX.value = 0
		if (uni.getStorageSync('token')) {
			userStore.getUser()
		}
	});


	const userDetailsBtn = async () => {
        if (!uni.getStorageSync('token')) {
        	userStore.getUser()
        }else {
            uni.navigateTo({
                url: '/pages/userdetails/userdetails'
            })
        }

		// uni.getUserInfo({
		//           desc: '登录数据',
		//           success: (res) => {
		//               console.log(res.userInfo);
		//               const data=res.userInfo
		//               usestore.setUser(data)
		//           }
		//       })
	}
    const userGetUser = async () => {
        userStore.getUser()
    }
	//向左滑动逻辑
	const startX = ref(0)
	const deltaX = ref(0)
	const handleTouchStart = (event) => {
		startX.value = event.touches[0].clientX;
	}
	const handleTouchMove = (event) => {
		const currentX = event.touches[0].clientX;
		deltaX.value = currentX - startX.value;
	}
	const handleTouchEnd = () => {
		// if (deltaX.value < -80) {
		// 	uni.navigateTo({
		// 		url: "/pages/login/login"
		// 	})
		// }
        uni.navigateTo({
            url: "/pages/login/login?type=1"
        })
	}
	//三次点击事件实现
	let clickCount = 0 // 点击计数器
	let jumpTimer = null
	let timer = null
	const handleTripleClick = () => {
		clearTimeout(jumpTimer);
		clearTimeout(timer)
		clickCount++;
		console.log(clickCount)
		timer = setTimeout(() => {
			clickCount = 0
		}, 600)
		if (clickCount > 3) {
			clickCount = 0
			jumpTimer = null
		} else if (clickCount === 3 && !jumpTimer) {
			jumpTimer = setTimeout(() => {
				let count = clickCount
				clickCount = 0
				jumpTimer = null
				if (count == 3) {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			}, 300)
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		height: 100vh;
	}

	.content {
		position: relative;

		.bg_color {
			height: 400rpx;
			z-index: 1;
			background-color: rgba(79, 129, 240, 1);
		}

		.title {
			position: absolute;
			top: 109rpx;
			left: 311rpx;
			width: 128rpx;
			height: 45rpx;
			font-size: 32rpx;
			z-index: 10;
			// text-align: center;
			color: rgba(255, 255, 255, 1);
		}

		.pic {
			position: absolute;
			top: 173rpx;
			left: 305rpx;
			width: 140rpx;
			height: 140rpx;
			z-index: 2;
			border-radius: 106.5rpx;
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}
        .picimg {
			position: absolute;
			top: 173rpx;
			left: 305rpx;
			width: 200rpx;
			height: 200rpx;
			z-index: 2;
			border-radius: 106.5rpx;
			image {
				width: 140rpx;
				height: 140rpx;
			}
		}

		.info {
			position: absolute;
			top: 232rpx;
			left: 32rpx;
			height: 484rpx;
			box-shadow: 0 0 40 0 rgba(230, 237, 246, 0.25);

			.top {
				height: 86rpx;
				border-radius: 10rpx;
				text-align: center;
				padding: 90rpx 257rpx 40rpx 257rpx;
				gap: 40rpx;
				background-color: rgba(255, 255, 255, 1);
				box-shadow: 0 0 40 0 rgba(230, 237, 246, 0.25);

				.phone {
					height: 86rpx;

					.userName {
						margin-top: 20rpx;
						margin-bottom: 20rpx;
					}
				}
			}

			.bottom {
				width: 622rpx;
				height: 156rpx;
				border-radius: 10rpx;
				margin-top: 32rpx;
				padding: 40rpx 32rpx 40rpx 32rpx;
				background-color: rgba(255, 255, 255, 1);

				.tools {
					width: 622rpx;
					height: 32rpx;
					font-size: 28rpx;
					line-height: 32rpx;
					margin-bottom: 40rpx;
					color: rgba(3, 19, 15, 1);
				}

				.tools_item {
					display: flex;
					justify-content: space-between;
					width: 574rpx;
					height: 84rpx;
					padding: 0 24rpx 0 24rpx;

					.evaluate {
						width: 78rpx;
						height: 84rpx;
						gap: 12rpx;
						text-align: center;
						margin: 0 90rpx 0 90rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.evaluate_item {
							font-size: 26rpx;
							opacity: 80%;
							border: 2prx solid rgba(51, 51, 51, 1);
						}
					}

					.settings {
						width: 104rpx;
						height: 84rpx;
						gap: 12rpx;
						text-align: center;
						margin: 0 90rpx 0 90rpx;

						image {
							width: 40rpx;
							height: 40rpx;
						}

						.settings_item {
							font-size: 26rpx;
							line-height: 32rpx;
							opacity: 80%;
							border: 2prx solid rgba(51, 51, 51, 1);
						}

					}
				}
			}
		}

		.footer {
			position: absolute;
			top: 1150rpx;
			left: 188rpx;
			width: 374rpx;
			height: 32rpx;
			font-size: 22rpx;
			line-height: 32rpx;
			// border: 2rpx solid rgba(51, 51, 51, 1);
			opacity: 30%;
		}
	}
</style>